<template>
<div class='message'>
  <span>消息</span>
  <ul>
      <router-link to="/message/attention" tag="li">
        <span>关注</span>
      </router-link>
      <router-link to="/message/official" tag="li">
        <span>官方</span>
      </router-link>
      <router-link to="/message/chat" tag="li">
        <span>聊天</span>
      </router-link>
      <router-link to="/message/comment" tag="li">
        <span>评论</span>
      </router-link>
  </ul>
  <router-view></router-view>
</div>

</template>

<script>

export default {
data() {
return {

};
},
computed: {},
watch: {},
methods: {

},
created() {

},
mounted() {

},
beforeCreate() {}, 
beforeMount() {}, 
beforeUpdate() {},
updated() {}, 
beforeDestroy() {}, 
destroyed() {},
activated() {}, 
}
</script>
<style lang='scss' scoped>
.message{
  width:100%;
  position: fixed;
  left: 0;
  /* bottom: 0; */
  height: 50px;
  // background: #eeeeee;
  ul{
    overflow: hidden;
    display: flex;
    color: #bfbfbf;
    li{
      list-style: none;
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      //  color: #665757;
      span{
        font-size: 12px;
        margin-top: 8px;
      }
     &.active{
       color: #000;
     }
    }
  }
}
</style>